<template>
  <div class="navbar">
    <div class="logo" @click="$router.push('/')">
      <img src="~images/logo.png" alt="" />
    </div>
    <div>
      <p>
        请输入内容
        <van-icon class="ipt-icon" name="search" />
      </p>
    </div>
    <div>
      <img
        :src="imgurl"
        alt=""
        @click="$router.push('/userinfo')"
        v-if="imgurl"
      />
      <img
        src="~images/head_img.png"
        alt=""
        @click="$router.push('/login')"
        v-else
      />

      <p>下载app</p>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        imgurl: '',
      }
    },
    async mounted() {
      if (localStorage.getItem('token')) {
        const res = await this.$http.get('/user/' + localStorage.getItem('id'))
        this.imgurl = res.data[0].user_img
      }
    },
  }
</script>

<style lang="stylus" scoped>
  .navbar
    height: 12.5vw
    background-color: white
    display: flex

    .logo
      display: flex
      justify-content: center
      align-items: center
      width: 25vw
      cursor: pointer

      img
        width: 100%

    div:nth-child(2)
      flex: 1
      display: flex
      justify-content: center
      align-items: center
      margin: 0 1.389vw

      p
        background-color: #f4f4f4
        height: 6.389vw
        width: 100%
        padding-left: 6.944vw
        position: relative
        border-radius: 3.611vw
        color: #aaa
        font-size: 3.333vw
        line-height: 7.222vw

        .ipt-icon
          position: absolute
          left: 2.778vw
          top: 50%
          transform: translate(0, -50%)

    div:nth-child(3)
      display: flex
      justify-content: center
      align-items: center
      cursor: pointer

      img
        width: 6.667vw
        height: 6.667vw

      p
        padding: 1.389vw 2.778vw
        margin: 0 2.222vw
        border-radius: 0.833vw
        background-color: #fb7299
        color: white
        font-size: 3.611vw
</style>
<style>
</style>